<template>
	<div class="card-fill layout-padding">
		<div class="hr-report-container">
			<!-- 左侧部门选择 -->
			<div class="sidebar">
				<div class="sidebar-header">
					<h3>部门选择</h3>
				</div>
				<div class="sidebar-content">
					<WtmDeptTree
						ref="deptTreeRef"
						:show-refresh="false"
						:show-count="false"
						:default-expand-all="false"
						:expand-first-level="true"
						:show-company-selector="false"
						@node-click="handleDeptNodeClick"
						@data-loaded="handleDeptDataLoaded"
					/>
				</div>
			</div>

			<!-- 主要内容区域 -->
			<div class="main-content">
				<!-- 页面头部 -->
				<div class="page-header">
					<!-- 骨架图 -->
					<div v-if="loading" class="header-skeleton">
						<div class="header-skeleton-left">
							<div class="skeleton-title"></div>
							<div class="skeleton-subtitle"></div>
						</div>
						<div class="header-skeleton-right">
							<div class="skeleton-datepicker"></div>
							<div class="skeleton-button"></div>
							<div class="skeleton-button"></div>
						</div>
					</div>

					<!-- 实际内容 -->
					<template v-else>
						<div class="header-info">
							<h2>{{ selectedYear || new Date().getFullYear() }}年·统计报表</h2>
							<p>{{ getCurrentDeptName() }}</p>
						</div>
						<div class="header-actions">
							<el-date-picker
								v-model="selectedYear"
								type="year"
								placeholder="选择年份"
								format="YYYY年"
								value-format="YYYY"
								@change="handleYearChange"
								size="default"
								class="year-selector"
								clearable
							/>
							<el-button type="primary" @click="loadReportData" :loading="loading">
								<el-icon>
									<Refresh />
								</el-icon>
								查询
							</el-button>
							<el-button type="default" @click="exportData">
								<el-icon>
									<Download />
								</el-icon>
								导出
							</el-button>
						</div>
					</template>
				</div>

				<!-- 统计表格组件 -->
				<div class="report-content">
					<StatisticsTable
						:year="selectedYear || new Date().getFullYear().toString()"
						:statistics-data="statisticsData"
						:overview-subtitle="getCurrentDeptName()"
						:loading="loading"
						:show-department-details="true"
						@refresh="loadReportData"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="统计报表;true;HengTong.Areas.Person.Controllers;SysPersonRepairBillReport">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Refresh, Download } from '@element-plus/icons-vue';
import { SysHrReportApi } from './api';
import StatisticsTable from '/src/components/StatisticsTable/index.vue';

// 响应式数据
const selectedYear = ref(new Date().getFullYear().toString());
const selectedDepartment = ref<any>(null);
const statisticsData = ref<any>(null);
const loading = ref(false);

// 部门树引用
const deptTreeRef = ref();

// 获取当前部门名称
const getCurrentDeptName = () => {
	if (!selectedDepartment.value) {
		return '全部部门';
	}

	// 尝试多种可能的字段名来获取部门名称
	const dept = selectedDepartment.value;
	const deptName = dept.name || dept.Name || dept.title || dept.Title || dept.label || dept.Label || dept.text || dept.Text || '全部部门';

	return deptName;
};

// 导出数据
const exportData = () => {
	ElMessage.info('导出功能开发中...');
};

// 处理年份变化
const handleYearChange = (year: string | null) => {
	// 如果年份被清空，设置为当前年份
	if (!year) {
		selectedYear.value = new Date().getFullYear().toString();
	}
	loadReportData();
};

// 处理部门节点点击
const handleDeptNodeClick = (dept: any) => {
	selectedDepartment.value = dept;
	loadReportData();
};

// 处理部门树数据加载完成
const handleDeptDataLoaded = (data: any[]) => {
	// 如果有部门数据，默认选择第一个部门
	if (data && data.length > 0) {
		const firstDept = data[0];
		selectedDepartment.value = firstDept;

		// 设置部门树的当前选中项
		if (deptTreeRef.value) {
			deptTreeRef.value.setCurrentKey(firstDept.Value);
		}
	}

	// 加载报表数据
	loadReportData();
};

// 加载报表数据
const loadReportData = async () => {
	try {
		loading.value = true;

		const requestParams = {
			year: parseInt(selectedYear.value || new Date().getFullYear().toString()),
			GroupId: selectedDepartment.value?.Value || null,
		};

		const response = await SysHrReportApi().getStatistics(requestParams);

		// 直接使用接口返回的原始数据，不做任何修改
		statisticsData.value = response;

		// const deptDetails = response?.DepartmentDetails;
		// if (!deptDetails || (Array.isArray(deptDetails) && deptDetails.length === 0)) {
		// 	ElMessage.info('当前查询条件下暂无子部门数据');
		// }
	} catch (error) {
		ElMessage.error('加载统计数据失败，请重试');
		statisticsData.value = null;
	} finally {
		loading.value = false;
	}
};

// 组件挂载时初始化
onMounted(() => {
	// 组件初始化逻辑
});
</script>

<style lang="scss" scoped>
.hr-report-container {
	display: flex;
	gap: 16px;
	height: 100%;
	width: 100%;

	// 左侧边栏
	.sidebar {
		width: 280px;
		flex-shrink: 0;
		background: var(--el-color-white);
		border-radius: 8px;
		border: 1px solid var(--el-border-color-light);
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
		overflow: hidden;

		// 暗黑模式适配
		[data-theme='dark'] & {
			border-color: var(--next-border-color);
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
		}

		.sidebar-header {
			background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
			color: white;
			padding: 16px 20px;
			text-align: center;
			border-bottom: 1px solid #357abd;

			h3 {
				margin: 0;
				font-size: 16px;
				font-weight: 600;
			}
		}

		.sidebar-content {
			padding: 0;
			height: calc(100% - 65px);
			overflow-y: auto;
		}
	}

	// 主要内容区域
	.main-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		min-width: 0; // 防止flex内容溢出

		.page-header {
			background: var(--el-color-white);
			border-radius: 8px;
			border: 1px solid var(--el-border-color-light);
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
			padding: 20px;
			margin-bottom: 16px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-shrink: 0;

			// 暗黑模式适配
			[data-theme='dark'] & {
				border-color: var(--next-border-color);
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
			}

			.header-info {
				h2 {
					font-size: 20px;
					font-weight: 600;
					margin: 0 0 4px 0;
					color: var(--el-text-color-primary);
				}

				p {
					font-size: 14px;
					color: var(--el-text-color-regular);
					margin: 0;
				}
			}

			.header-actions {
				display: flex;
				align-items: center;
				gap: 12px;

				.year-selector {
					width: 140px;
				}

				.el-button {
					.el-icon {
						margin-right: 6px;
					}
				}
			}
		}

		.report-content {
			flex: 1;
			background: var(--el-color-white);
			border-radius: 8px;
			border: 1px solid var(--el-border-color-light);
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
			padding: 0; // 移除内边距，让表格组件占满
			overflow: hidden;
			display: flex;
			flex-direction: column;
			min-height: 0; // 允许内容压缩
			max-height: calc(100vh - 180px); // 限制最大高度，减去头部和边距

			// 暗黑模式适配
			[data-theme='dark'] & {
				border-color: var(--next-border-color);
				box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
			}
		}
	}

	// 响应式设计
	@media (max-width: 1200px) {
		.sidebar {
			width: 260px;
		}
	}

	@media (max-width: 768px) {
		flex-direction: column;
		height: auto;

		.sidebar {
			width: 100%;
			max-height: 300px;
		}

		.main-content {
			.page-header {
				flex-direction: column;
				gap: 16px;
				align-items: stretch;

				.header-actions {
					justify-content: center;
				}
			}
		}

		// 页面头部骨架图样式
		.header-skeleton {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			animation: pulse 2s infinite;

			.header-skeleton-left {
				display: flex;
				flex-direction: column;
				gap: 8px;

				.skeleton-title {
					width: 200px;
					height: 24px;
					background: var(--el-fill-color);
					border-radius: 4px;

					// 暗黑模式适配
					[data-theme='dark'] & {
						background: var(--next-color-hover);
					}
				}

				.skeleton-subtitle {
					width: 120px;
					height: 16px;
					background: var(--el-fill-color);
					border-radius: 4px;

					// 暗黑模式适配
					[data-theme='dark'] & {
						background: var(--next-color-hover);
					}
				}
			}

			.header-skeleton-right {
				display: flex;
				align-items: center;
				gap: 12px;

				.skeleton-datepicker {
					width: 140px;
					height: 32px;
					background: var(--el-fill-color);
					border-radius: 4px;

					// 暗黑模式适配
					[data-theme='dark'] & {
						background: var(--next-color-hover);
					}
				}

				.skeleton-button {
					width: 80px;
					height: 32px;
					background: var(--el-fill-color);
					border-radius: 4px;

					// 暗黑模式适配
					[data-theme='dark'] & {
						background: var(--next-color-hover);
					}
				}
			}
		}
	}

	// 骨架图脉冲动画
	@keyframes pulse {
		0%,
		100% {
			opacity: 1;
		}
		50% {
			opacity: 0.6;
		}
	}
}
</style>
